<template>
  <div class="my-questions">
    <div class="page-header">
      <a-button type="text" @click="goBack">
        <icon-arrow-left />返回
      </a-button>
      <h1>我的问题</h1>
    </div>

    <a-spin :loading="loading">
      <div class="question-list">
        <a-empty v-if="questions.length === 0" description="暂无问题" />
        <a-card v-for="question in questions" :key="question.questionIdStr || question.questionId" class="question-card" @click="viewQuestionDetail(question.questionIdStr || question.questionId)">
          <div class="question-header">
            <span class="question-type">{{ question.questionType }}</span>
            <h3 class="question-title">{{ question.title }}</h3>
          </div>
          <div class="question-content">{{ question.content }}</div>
          <div class="question-footer">
            <div class="question-meta">
              <span class="publish-time">发布于 {{ formatTime(question.publishTime) }}</span>
              <span class="answer-count">{{ question.answerCount }} 回答</span>
            </div>
            <div class="question-stats">
              <span class="like-count">
                <icon-thumb-up />
                {{ question.likeCount }}
              </span>
              <span class="hot-degree">
                <icon-fire />
                {{ question.hotDegree }}
              </span>
            </div>
          </div>
        </a-card>
      </div>

      <div class="pagination-container">
        <a-pagination
          v-model:current="currentPage"
          :total="total"
          :page-size="pageSize"
          @change="handlePageChange"
        />
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import { questionApi } from '@/api/question';

const router = useRouter();
const loading = ref(true);
const questions = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 获取我的问题列表
const fetchMyQuestions = async (page = 1) => {
  loading.value = true;
  try {
    const res = await questionApi.getMyQuestions({
      pageNum: page,
      pageSize: pageSize.value
    });
    
    questions.value = res.data.list || [];
    total.value = res.data.total || 0;
    loading.value = false;
  } catch (error) {
    console.error('获取我的问题列表失败', error);
    Message.error('获取问题列表失败，请重试');
    
    // 使用模拟数据作为备用
    questions.value = [
      {
        questionId: '1',
        title: 'Vue3 组件如何实现数据共享？',
        content: '我正在开发一个Vue3项目，需要在多个组件之间共享状态，除了Vuex，还有什么好的方案吗？',
        questionType: '技术',
        publishTime: new Date('2023-05-15T10:30:00'),
        likeCount: 25,
        hotDegree: 89,
        answerCount: 8
      },
      {
        questionId: '2',
        title: '如何优化React应用的性能？',
        content: '我的React应用在处理大量数据时性能下降明显，有哪些优化技巧可以提高性能？',
        questionType: '技术',
        publishTime: new Date('2023-05-10T14:20:00'),
        likeCount: 18,
        hotDegree: 76,
        answerCount: 5
      },
      {
        questionId: '3',
        title: '推荐一些学习前端的优质资源',
        content: '作为前端初学者，希望大家能推荐一些高质量的学习资源，包括书籍、网站、视频课程等。',
        questionType: '学习',
        publishTime: new Date('2023-05-05T09:15:00'),
        likeCount: 32,
        hotDegree: 95,
        answerCount: 12
      }
    ];
    
    total.value = 20; // 模拟总数
    loading.value = false;
  }
};

// 查看问题详情
const viewQuestionDetail = (questionId) => {
  // 将questionId转换为字符串，避免JavaScript大整数精度问题
  router.push(`/communication/question/${String(questionId)}`);
};

// 返回上一页
const goBack = () => {
  router.push('/communication');
};

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchMyQuestions(page);
};

// 格式化时间
const formatTime = (time) => {
  if (!time) return '';
  
  const date = new Date(time);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

onMounted(() => {
  fetchMyQuestions();
});
</script>

<style scoped>
.my-questions {
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 0 10px;
  font-size: 24px;
  color: #333;
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.question-card {
  cursor: pointer;
  transition: all 0.3s;
}

.question-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.question-header {
  margin-bottom: 12px;
}

.question-type {
  display: inline-block;
  padding: 2px 8px;
  background-color: #e8f2ff;
  color: #1890ff;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 8px;
}

.question-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.question-content {
  margin-bottom: 16px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.question-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 14px;
}

.question-meta {
  display: flex;
  gap: 16px;
}

.question-stats {
  display: flex;
  gap: 16px;
}

.like-count, .hot-degree {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
</style>